@media print{
    @page{
        size: auto;
    }
    #settings {
        display: none;
    }
    body{
        padding: 5px;
    }
}
*{
    margin:0;
    padding:0;
}
body{
    width: 100%;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Liberation Sans","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Wenquanyi Micro Hei","WenQuanYi Zen Hei","ST Heiti",SimHei,SimSun,"WenQuanYi Zen Hei Sharp",sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.33;
    text-align:center;
}
#app{
    margin:0 auto;
    padding: 20px;
}
#settings{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 180px;
    height: auto;
    padding: 15px 25px;
    background: #333;
    color: #ddd;
    border-radius:15px;
    font-size:14px;
}
#settings input{
    width: 100px;
}
#settings button{
    width: 80px;
    padding: 2px 10px;
}
#settings button:hover{
    padding: 2px 10px;
    background:#333;
    color:#ddd;
}
#settings p{
    text-align: left;
    margin:5px;
}
#settings p.warns{
    font-size:12px;
    color:#f33;
}
#app .content{
    font-family: "Courier New";
    margin-top:10px;
    line-height: 1.6;
}
input{
    border:0;
    padding:2px 5px;
}
input:disabled{
    background:#666;
}
p.info{
    font-size:12px;
}
h3{
    margin: 0 0 10px;
}
ul{
    list-style: none;
    width:25%;
    float:left;
}
ul li{
    list-style: none;
    text-align: left;
    line-height: 1.6;
}